Collapsible (Library)

Collapsible

Enables an HTML div tag with the facility to hide and show the contents within it.

Syntax

HTML	<div id=divID class="collapsible">...</div>
Scripting	application.addLibrary("/cordys/wcp/library/ui/collapsible.htm",divID)

By default, the div tag will be expanded, that is, the contents of the tag will be shown. On clicking the collapse icon at the right corner of the DIV element, the contents of the element can be collapsed, and vice versa.
To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the Application object.
The properties, methods and events defined for this component are as follows:

Table 1. List of Attributes
Attribute	Property	Description
collapsibleHeader		Optional, String. Contains the ID of the header node. This makes it possible to define your own header. The header node must be defined outside the Collapsible library. If not defined, the Collapsible library creates its own header.
expanded	expanded	Boolean that defines whether the collapsible content should be kept expanded or collapsed when the page is loaded. true: Default. Contents will be shown expanded when page is loaded. false: Contents will be collapsed when opened. On clicking the Expand icon at the right corner of the DIV element, the content can be expanded to full length.
leftCaption	leftCaption	Optional, String. Denotes the caption on the left side in the Collapsible element when the collapsibleHeader attribute is not defined. If used, the collapsibleHeader attribute is a string that refers to the ID of the HTML node containing the rightCaption. For details, see collapsibleHeader.
leftCaptionWeight	leftCaptionWeight	String that denotes the font weight of the caption on the left side in the collapsible element.
rightCaption	rightCaption	Optional, String. Denotes the caption on the right side in the Collapsible element when collapsibleHeader attribute is not defined. If used, the collapsibleHeader attribute is a string that refers to the ID of the HTML node containing the rightCaption. For details, see collapsibleHeader.
rightCaptionWeight	rightCaptionWeight	String that denotes the font weight of the caption on the right side in the Collapsible element.
showBorderBottom	showBorderBottom	Boolean that determines whether the lower border will be displayed on the onexpand event. true: Default. The lower border of a DIV border will be displayed. false: The lower border of a DIV object will not be displayed.
static		Optional, Boolean. Determines whether the Collapsible element is static or dynamic at startup. false: By default, the Collapsible element is dynamic, you can expand and collapse it by clicking the header. true: The Collapsible element is static.

Table 2. List of Methods
Method	Description
collapse()	Collapses the Collapsible element so that the content inside the DIV is hidden from view.
disable()	Disables the Collapsible element and all controls in it.
enable()	Enables the Collapsible element and all controls in it.
expand()	Expands the Collapsible element so that the content inside the DIV is shown completely.
getCaption(sCaption)	Returns the label of the Collapsible element (string). sCaption: Optional, string. The default value is left, which refers the left caption or label. The value right refers to the right caption or label.
getStatic()	Returns the value true if the Collapsible element is static, else returns false.
getTooltip()	Returns the tooltip or title attached to the header of the Collapsible element .
hide()	Hides the entire Collapsible element. A hidden Collapsible element cannot be expanded or collapsed.
isExpanded()	Returns true when the Collapsible element is expanded. Returns false when it is collapsed.
setCaption(sLabel, sCaption)	Sets the label of the Collapsible element. sLabel: Required, string. Refers to the text to be displayed in the label. To remove a caption, pass "". sCaption: Optional, string. The default value is left, which refers the left caption or label. The value right refers to the right caption or label.
setHeader(sHeaderId, sLeftCaptionId, sRightCaptionId)	Sets the header object for the Collapsible element. Existing header will be removed, if generated by the Collapsible element . Left- and or right- caption nodes are also updated.
setStatic(bSelect)	A static Collapsible element cannot be expanded or collapsed by clicking its header. bSelect: Required. If set to true, it makes the Collapsible element static.
setTooltip(sTooltip)	Sets the tooltip or title attached to the header of the Collapsible element. sTooltip: Required, String. Refers to the description of the tooltip.
show()	Shows the Collapsible element.

Table 3. List of Events
Event	Description
oncollapse	Fires when the element is collapsed to hide its contents from view.
onexpand	Fires when the element is expanded to show its full content.

Note: If expanded="false", sometimes the content is displayed for the fraction of a second, before it is hidden. To avoid this, it is recommended to use style.display="none".
The following table describes the possible values for the rightCaptionWeight and leftCaptionWeight properties in the collapsible component.

Table 4. List of Values
Value	Description
bold	Font is bold.
bolder	Font is heavier than regular bold.
lighter	Font is lighter than normal.
100	Font is at least as light as the 200 weight.
200	Font is at least as bold as the 100 weight and at least as light as the 300 weight.
300	Font is at least as bold as the 200 weight and at least as light as the 400 weight.
400	Font is normal.
500	Font is at least as bold as the 400 weight and at least as light as the 600 weight.
600	Font is at least as bold as the 500 weight and at least as light as the 700 weight.
700	Font is bold.
800	Font is at least as bold as the 700 weight and at least as light as the 900 weight.
900	Font is at least as bold as the 800 weight.

Example

This sample code demonstrates the implementation and use of the collapsible component.{color}

<\!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="/cordys/wcp/application.js"></script>
	<script type="text/javascript">
	function expand()
	{
		document.getElementById("collap").expand();
	}
	function collapse()
	{
		document.getElementById("collap").collapse();
	}
	</script>
	<style type="text/css">
		label { font-size:11; font-family:verdana; font-weight:normal;}span {font-size:11; font-family:verdana; }
		button { font-size:11; font-family:verdana;width:80px}
		div {font-size:11; font-family:verdana; }
	</style>
</head>
<body rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0" scroll="no">
	<table width="80%">
	<tr valign="top">
	<td width="50%">
	<div id="collap" name="collap" class="collapsible" expanded="false" onexpand="application.notify('expanded')"
	oncollapse="application.notify('collapsed')" leftCaption="Test Caption2">
		<div>sample 1</div>
		<div>sample 2</div>
		<div>sample 3</div>
		<div>sample 4</div>
		<div>sample 5</div>
	</div>
	</td>
	<td>
	<div class="collapsible" expanded="false" rightCaption="Grid" style="overflow:auto;width:100%;height:100%">
	<br>
	<table id="sampleTable" class="grid" border=0 cellspacing=0 cellpadding=0 saveState="false" >
	<thead>
		<tr>
		<td><input class="medium" style="width:100%;height:20px" type="button"
		value="Column 1"></input></td>
		<td><input class="medium" style="width:100%;height:20px" type="button"
		value="Column 2"></input></td>
		<td><input class="medium" style="width:100%;height:20px" type="button"
		value="Column 3"></input></td>
		</tr>
	</thead>
	<tbody>
		<tr class="input">
		<td style="border:1px solid">This</td>
		<td style="border:1px solid">is</td>
		<td style="border:1px solid">Sample1</td>
		</tr>
		<tr class="input">
		<td style="border:1px solid">This</td>
		<td style="border:1px solid">is</td>
		<td style="border:1px solid">Sample2</td>
		</tr>
		<tr class="input">
		<td style="border:1px solid">This</td>
		<td style="border:1px solid">is</td>
		<td style="border:1px solid">Sample3</td>
		</tr>
		<tr class="input">
		<td style="border:1px solid">This</td>
		<td style="border:1px solid">is</td>
		<td style="border:1px solid">Sample4</td>
		</tr>
		<tr class="input">
		<td style="border:1px solid">This</td>
		<td style="border:1px solid">is</td>
		<td style="border:1px solid">Sample5</td>
		</tr>
	</tbody>
	</table>
	</div>
	</td>
	</tr>
	</table>
	<button onclick="expand()"> expand</button>
	<button onclick="collapse()"> collapse</button>
</body>
</html>

See Also

Collapsible, collapsibleHeader

pp108 : Collapsible (Library)

Collapsible (Library)

Collapsible

Syntax

Example